import React, {Component} from 'react';
import {Form, Icon, Input, Button, Row, Col, Select, message, Tree} from 'antd';
import './Login.css';
import StaffUserService from '../../service/UserService';
import md5 from 'js-md5';

const formItemCol = {
    labelCol: {span: 9},
    wrapperCol: {span: 7}
};

class Login extends Component {

    state = {};

    /** 请求参数 */
    requestData = {
        account: undefined,
        passWord: undefined
    };

    /**
     * 在渲染前调用
     * */
    componentWillMount() {

    }


    /** 表单提交 */
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {

            if (!err) {
                this.requestData = {
                    ...this.requestData,
                    ...values
                };

                console.log(this.requestData);

                // 获取上下文
                let context = this.props.context;
                StaffUserService.login(this.requestData,
                    (res) => {
                        message.success("登录成功");
                        context.setUserInfo(res.data);
                        context.openPage(context.PAGE_CODES.HOME, undefined);
                    },
                    (res) => {
                        if (res.errorCode === 'NO_REGISTER') {
                            context.openPage(context.PAGE_CODES.REGISTER, undefined);
                        }
                    });

            }
        });
    };


    render() {
        console.log(md5('a'));

        const {getFieldDecorator} = this.props.form;


        return (

            <div className="content">

                <Form onSubmit={this.handleSubmit} className="login-form">

                    <Form.Item {...formItemCol} label={'登录账号'} required={true}
                               className={'form-item'}>
                        {getFieldDecorator('account', {
                            rules: [{required: true, message: '请输入登录账号'}]
                        })(
                            <Input
                                placeholder="登录账号"
                                className="input"
                            />
                        )}
                    </Form.Item>

                    <Form.Item {...formItemCol} label={'登录密码'} required={true}
                               className={'form-item'}>
                        {getFieldDecorator('passWord', {
                            rules: [{required: true, message: '请输入密码'}]
                        })(
                            <Input
                                placeholder="密码"
                                className="input"
                                type='password'
                            />
                        )}
                    </Form.Item>


                    <Form.Item>

                        <Button type="primary" htmlType="submit"
                                style={{width: 200}}>
                            登录
                        </Button>

                    </Form.Item>
                </Form>

                <div>
                    <Button htmlType="submit"
                            style={{width: 200, marginTop: '-10px', marginBottom: '15px'}}
                            onClick={() => {

                                // 获取上下文
                                let context = this.props.context;
                                context.openPage(context.PAGE_CODES.REGISTER, undefined);

                            }}>
                        注册
                    </Button>
                </div>

            </div>
        );
    }
}

const LoginForm = Form.create({name: 'add_shop'})(Login);
export default LoginForm;

